<template>
  <div>
    <div class="user-background-img">
      <!-- <img src="../assets/images/咖啡.jpg" alt="" /> -->
      <!-- <img :src="imgBase" alt="" /> -->
      <van-uploader class="addImg" :after-read="afterRead">
        <img :src="imgBase" alt="" />
      </van-uploader>

      <van-uploader :after-read="afterRead" v-show="isHasImg">
        <van-button icon="plus" round color="#999">点击可上传图片</van-button>
      </van-uploader>

      <div class="user-message">
        <div class="user-head">
          <div class="user-pic">
            <van-uploader
              v-model="fileList"
              :deletable="false"
              :max-count="1"
              :after-read="afterRead2"
            />
          </div>
          <div class="user-title">
            <div class="user-nickname">{{ nickName }}</div>
            <div class="user-motto">{{ motto }}</div>
          </div>
        </div>
        <div class="user-list">
          <van-cell title="个人资料" is-link :to="{ name: 'UserMes' }" />
          <van-cell title="我的订单" is-link :to="{ name: 'Indent' }" />
          <van-cell title="我的收藏" is-link :to="{ name: 'Collect' }" />
          <van-cell title="地址管理" is-link :to="{ name: 'Address' }" />
          <van-cell title="安全中心" is-link :to="{ name: 'Safe' }" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {
      imgBase: null,
      // imgBase2: null,
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: sessionStorage.getItem("userToken"),
      isHasImg: true,
      nickName: "",
      fileList: [],
      motto: "",
    };
  },
  methods: {
    getMyMessage() {
      let tokenString = this.tokenString;
      let appkey = this.appkey;
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/findMy",
        params: {
          appkey,
          tokenString,
        },
      })
        .then((res) => {
          
          this.imgBase = res.data.result[0].userBg;
          this.nickName = res.data.result[0].nickName;
          this.isHasImg = false;
          this.fileList[0] = { url: res.data.result[0].userImg };
          this.motto = res.data.result[0].desc;
          if (this.motto.length === 0) {
            this.motto = "这家伙很懒,什么都没有留下";
          }
        })
        .catch((err) => {
          
        });
    },

    afterRead(file) {
      this.imgBase = file.content;
      this.isHasImg = false;
      let tokenString = this.tokenString;
      let imgType = file.file.type.split("/")[1];
      let appkey = this.appkey;
      let serverBase64Img = file.content.replace(
        /^data:image\/[A-Za-z]+;base64,/,
        ""
      );
      let data = `appkey=${appkey}&tokenString=${tokenString}&imgType=${imgType}&serverBase64Img=${serverBase64Img}`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/updateUserBg",
        data,
      })
        .then((res) => {
          
          //   this.imgBase = res.data.userBg;
        })
        .catch((err) => {
          
        });
    },

    afterRead2(file) {
      this.imgBase2 = file.content;
      let tokenString = this.tokenString;
      let imgType = file.file.type.split("/")[1];
      let appkey = this.appkey;
      let serverBase64Img = file.content.replace(
        /^data:image\/[A-Za-z]+;base64,/,
        ""
      );
      let data = `appkey=${appkey}&tokenString=${tokenString}&imgType=${imgType}&serverBase64Img=${serverBase64Img}`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/updateAvatar",
        data,
      })
        .then((res) => {
          
          //   this.imgBase = res.data.userBg;
        })
        .catch((err) => {
          
        });
    },
  },
  created() {
    this.getMyMessage();
  },
};
</script>

<style lang="less" scoped>
.user-background-img {
  position: relative;
  height: 200px;
  line-height: 200px;
  text-align: center;
  .addImg {
    position: absolute;
    top: 0px;
    left: 0;
    img {
      width: 100%;
    }
  }

  .user-message {
    width: 96%;
    // height: 200px;
    line-height: normal;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    left: 2%;
    top: 80%;
    z-index: 99;
    .user-head {
      height: 100px;
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      .user-pic {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #ddd;
        /deep/.van-uploader__upload {
          margin: 0;
        }
        /deep/.van-uploader__preview {
          margin: 0;
        }
      }
      .user-title {
        height: 80px;
        text-align: left;
        flex: 1;
        padding-left: 20px;
        .user-nickname {
          color: rgb(12, 52, 186);
          font-weight: bold;
          font-size: 20px;
          margin: 10px 0;
        }
        .user-motto {
          color: #555;
          font-size: 14px;
        }
      }
    }
    .user-list {
      text-align: left;
      /deep/.van-cell {
        background-color: transparent;
      }
    }
  }
}
/deep/.van-uploader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>